﻿
@{
    /**/

    ViewBag.Title = "SignalrsDemo";
}

<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>

<style type="text/css">
    #chatbox {
        width: 100%;
        height: 500px;
        border: 2px solid blue;
        padding: 5px;
        margin: 5px 0px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .linfo {
    }

    .rinfo {
        text-align: right;
    }
</style>
<script type="text/javascript">
    $(function () {

        var clientName = $("#clientname").val();
        var eChatBox = $("#chatbox");
        var eUsers = $("#users");

        var chat = $.connection.chat;
        $.connection.hub.qs = { "clientName": clientName };
        chat.state.test = "test";

        chat.client.receiveMessage = function (dt, cn, msg) {
            var clsName = "linfo";
            if (cn == clientName || cn.indexOf("您对") >= 0) clsName = "rinfo";
            eChatBox.append("<p class='" + clsName + "'>" + dt + " <strong>" + cn + "</strong> 说：<br/>" + msg + "</p>");
            eChatBox.scrollTop(eChatBox[0].scrollHeight);
        }

        chat.client.userChange = function (dt, msg, users) {
            eChatBox.append("<p>" + dt + " " + msg + "</p>");
            eUsers.find("option[value!='']").remove();
            for (var i = 0; i < users.length; i++) {
                if (users[i].Value == clientName) continue;
                eUsers.append("<option value='" + users[i].Key + "'>" + users[i].Value + "</option>")
            }
        }

        $.connection.hub.start().done(function () {

            $("#btnSend").click(function () {
                var toUserId = eUsers.val();
                if (toUserId != "") {
                    chat.server.sendOne(toUserId, $("#message").val())
                        .done(function () {
                            //alert("发送成功！");
                            $("#message").val("").focus();
                        })
                        .fail(function (e) {
                            alert(e);
                            $("#message").focus();
                        });
                }
                else {
                    chat.server.send($("#message").val())
                        .done(function () {
                            //alert("发送成功！");
                            $("#message").val("").focus();
                        })
                        .fail(function (e) {
                            alert(e);
                            $("#message").focus();
                        });
                }
            });

        });

    });
</script>


<h3>大众聊天室</h3>
<div id="chatbox">
</div>
<div>
    <span>聊天名称：</span>
    @Html.TextBox("clientname", ViewBag.ClientName as string, new { @readonly = "readonly", style = "width:300px;" })
    <span>聊天对象：</span>
    @Html.DropDownList("users", ViewBag.OnLineUsers as IEnumerable<SelectListItem>)
</div>
<div>
    @Html.TextArea("message", new { rows = 5, style = "width:500px;" })
    <input type="button" value="发送消息" id="btnSend" />
</div>
